<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="/ui/css/confessionCSS.css">
		<link rel="stylesheet" href="/ui/css/colorbox.css" />
		<link rel="shortcut icon" href="/ui/html/resources/favicon.ico" />
		<link rel="stylesheet" href="ui/css/alertify.core.css" />
		<link rel="stylesheet" href="ui/css/alertify.default.css" />
		<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="/ui/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="/ui/js/confessJS.js"></script>
		<script src="/ui/js/jquery.colorbox-min.js"></script>
		<script src="ui/js/alertify.min.js"></script>
		<title>Confessions</title>
	</head>
	<body>
		<div id="container">
			<div class="confessionForm" style='display:none'>
				<div id='inline_content' style='padding:10px; background:#fff;'>
					<div id="formData">
						<div id="confessionTitle">
							<strong><p>My Confession</p></strong>
						</div>
						<div id="errors">
							<ul id="errorList">
							</ul>
						</div>
						<div id="confessionTextArea">
							<textarea name="text" id="confessionData">Enter your Confession......</textarea>				 
						</div>
						<div id="submitConfession">
							<a href="" class="submitButton">Submit</a>
						</div>
					</div>
				</div>
			</div>
			<div class="confessionWrapper">
				<#assign x = 1>
				<div id="createConfession">
					<div id="postitContainer">
						<a id="postitYellow" class='inline' href="#inline_content">
						<strong><p>Create a confession...</p></strong>
						</a>
					</div>
				</div>
				<div id="confessions">
					<#list confessions as confession>
						<div class="confession">
							<div id="postitContainer">
								<#if x % 5 == 0>
									<a id="postitPink"><p>${confession.confessionBody}</p></a>
								<#elseif x % 5 == 1>
									<a id="postitGreen"><p>${confession.confessionBody}</p></a>
								<#elseif x % 5 == 2>
									<a id="postitBlue"><p>${confession.confessionBody}</p></a>
								<#elseif x % 5 == 3>
									<a id="postitOrange"><p>${confession.confessionBody}</p></a>
								<#elseif x % 5 == 4>
									<a id="postitYellow"><p>${confession.confessionBody}</p></a>
								</#if>
							</div>
						</div>
						<#assign x = x + 1>
					</#list>
				</div>
			</div>
		</div>
	</body>
</html>